<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../component/layui/css/layui.css" rel="stylesheet" />
    <link href="../../admin/css/pearCommon.css" rel="stylesheet"/>
    <link href="../../admin/css/pearTable.css" rel="stylesheet"/>
    <link href="../../admin/css/pearButton.css" rel="stylesheet"/>
    <link href="../../admin/css/pearTreeTable.css" rel="stylesheet"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="javascript:void(0);">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="date1" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">Key 值</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button type="submit" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-search"  lay-submit="" lay-filter="select">&nbsp;查询</button>
                        <button type="reset" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-refresh" plain>&nbsp;重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body" style="padding-top: 30px;">
        <button style="margin-left: 15px;" class="layui-icon layui-icon-add-1 pear-btn pear-btn-primary pear-btn-md add"  lay-event="add">&nbsp;新增</button>
        <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-md"  lay-event="del" >&nbsp;批量删除</button>
        <table id="powerTable" lay-filter="powerTable"></table>
    </div>
</div>

<script type="text/html" id="auth-state">
    <button class="layui-icon layui-icon-edit pear-btn pear-btn-primary pear-btn-sm"  lay-event="edit" />
    <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-sm"  lay-event="del" />
</script>

<script src="../../component/layui/layui.js"></script>
<script>
    layui.use(['treetable','operate','table'], function () {
        var $ = layui.jquery;
        var treetable = layui.treetable;
        var operate = layui.operate;
        var table = layui.table;

        window.refresh = function(){
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                skin:'line',
                treeDefaultClose: true,
                elem: '#powerTable',
                url: '/system/dept/data',
                page: true,
                cols: [
                    [
                        {type: 'checkbox'},
                        {field: 'name', minWidth: 120, title: '部门名称'},
                        {field: 'leader', title: '负责人'},
                        {field: 'email', title: '邮箱'},
                        {field: 'phone', width: 150, align: 'center', title: '联系方式'},
                        {templet: '#auth-state', width: 150, align: 'center', title: '操作'}
                    ]
                ],
                done: function () {

                }
            });

        }

        // 监听自定义
        table.on('tool(powerTable)',function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
                operate.delete('/system/dept/deleteById/'+data['id'],null,function(result){
                    if(result.code==200) {
                        operate.success(result.msg, function () {
                            obj.del();
                        })
                    }else if(result.code==300){
                        operate.warming(result.msg);
                    }else{
                        operate.failure(result.msg);
                    }
                })

            } else if (layEvent === 'edit') {
                operate.open("权限修改","/system/dept/edit?id="+data['id'],{width:'450px',height:'500px'});
            }
        })

        refresh();

        $("body").on("click",".add",function(){
            operate.open("部门添加","/system/dept/add",{width:'450px',height:'500px'});
        })



    });
</script>
</body>
</html>